<template>
	<view class="content">
		<view class="content_top">
			<view class="content_top_box" v-if="!tab">
				<view class="user">
					<image mode="aspectFit" :src="info.headerimg"></image>
					<view class="name">{{info.lxr}}</view>
				</view>
				<view class="news">
					<view class="left">
						<view class="text" v-if="info.shouji_showtype=='1'" @click="getTel">
							手机号：<text>{{info.shouji}}</text></view>
						<view class="text" v-else>手机号：<text>{{info.shouji}}</text></view>
						<view class="text">常住城市：<text>{{info.ResidentCity}}</text></view>
						<view class="text">微信号：<text>{{info.weixin}}</text></view>
						<view class="text">电子邮箱：<text>{{info.email}}</text></view>
					</view>
					<view class="right" @click="tab = true">
						<image mode="widthFix" src="https://txl.cnpowder.com.cn/images/ewm2.png"></image>
						<view class="text">保存到手机</view>
					</view>
				</view>
			</view>
			<view class="content_top_box" v-else>
				<image class="qrimg" id="qrs" mode="widthFix" :src="mpQr"></image>
				<view class="qrtext">
					点击保存按钮，保存到通讯录
					<text @click="tab = false">返回</text>
				</view>
				<view class="qrbutton" @click="bcImg">保存</view>
			</view>
		</view>
		<view class="content_title">
			名片信息
		</view>
		<view class="content_news">
			<view class="name">性别</view>
			<view class="text">{{info.xingbie}}</view>

		</view>
		<view class="content_title">
			业务或专长
		</view>
		<view class="content_news">
			<view class="text">{{info.SpecializedSkill}}</view>
		</view>
		<view class="content_bottom" v-if="!isUser&&isLog">
			<view class="button" v-if="buttonType=='0'" @click="shenqing">申请好友</view>
			<view class="button" v-if="buttonType=='1'" @click="link('/comm/new/new?id='+userid)">
				发送消息
			</view>
			<view class="button" v-if="buttonType=='2'">
				申请已发出，正在等待对方通过
			</view>
			<view class="button" v-if="buttonType=='3'">
				Ta正在等待你通过好友申请
			</view>
			<view class="button" v-if="buttonType=='4'">
				你拒绝了Ta的好友申请
			</view>
			<view class="button" v-if="buttonType=='5'">
				Ta拒绝了你的好友申请
			</view>
		</view>
		<view class="content_isbottom">
			<view class="content_isbottom_box" v-if="isUser">
				<view class="button" @click="link('/user/userinfo/userinfo?txlid='+txlid)">完善名片</view>
				<view class="button" @click="showQr">分享名片</view>
			</view>
		</view>
		<card :userid="userid" :txlid="txlid" ref="cardDome"></card>
	</view>
</template>

<script setup>
	import {
		ref,
		nextTick
	} from 'vue'
	import {
		homeApi
	} from "@/api/index"
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		link,
		getMingpian,
		saveBase64Image,
		getQrurl
	} from '@/utils/utils.js'
	import card from '@/components/card/card.vue'
	onLoad((open) => {
		if(open.userid){
			userid.value = open.userid
		}
		if(open.txlid){
			txlid.value = open.txlid
		}
		if (open.scene) {
			let canshu = getQrurl(open.scene)
			userid.value = canshu.userid
			txlid.value = canshu.txlid
		}
		getNews()
		getMingpian(userid.value, txlid.value).then((res) => {
			mpQr.value = res
		})
		nextTick(() => {
			load.value = true
		})
	})
	onShow(() => {
		if (load.value) {
			getNews()
		}
	})
	const load = ref(false)
	const mpQr = ref('')
	const userid = ref('')
	const txlid = ref('')
	const info = ref({})
	const getNews = async () => {
		let data = {
			do: 'txlcard',
			userid: userid.value,
			txlid: txlid.value
		}
		let res = await homeApi.publicGet(data)
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == 'txlcard') {
				info.value = res.columns[i]
				if (info.value.isselfcard == '1') {
					isUser.value = true
				} else {
					isUser.value = false
					if (info.value.isfriend1 == '1' || info.value.isfriend2 == '1') {
						buttonType.value = 1
					}
					if (info.value.isfriend1 == '2') {
						buttonType.value = 2
					}
					if (info.value.isfriend2 == '2') {
						buttonType.value = 3
					}
					if (info.value.isfriend1 == '9') {
						buttonType.value = 4
					}
					if (info.value.isfriend2 == '9') {
						buttonType.value = 5
					}
				}
			}
		}
	}
	// 是否是本人浏览
	const isUser = ref(false)
	// 是否登录
	const isLog = ref(true)
	// 按钮状态
	const buttonType = ref(0)
	const tab = ref(false)
	const cardDome = ref(null)
	const showQr = () => {
		cardDome.value.show(userid.value,txlid.value)
	}
	// 查看手机号
	const getTel = async () => {
		let data = {
			do: 'txlcardcheckshowphone',
			userid: userid.value,
			txlid: txlid.value
		}
		let res = await homeApi.publicGet(data)
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == 'txlcardcheckshowphone') {
				if (res.columns[i].statuscode == '200') {
					info.value.shouji = res.columns[i].shouji
					info.value.weixin = res.columns[i].weixin
					info.value.email = res.columns[i].email
				} else {
					uni.showToast({
						title: res.columns[i].message,
						icon: 'none',
						duration: 2000
					});
				}
			}
		}
	}
	// 申请好友
	const shenqing = async () => {
		let data = {
			do: 'txladdfriend',
			txlid: txlid.value,
			fuid: userid.value,
		}
		let res = await homeApi.publicGet(data)
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == `txladdfriend`) {
				if (res.columns[i].statuscode == '200') {
					uni.showToast({
						title: res.columns[i].message,
						icon: 'none',
						duration: 2000
					});
					getNews()
				} else {
					uni.showToast({
						title: res.columns[i].message,
						icon: 'none',
						duration: 2000
					});
				}
			}
		}
	}

	// 保存到手机
	const bcImg = () => {
		saveBase64Image(mpQr.value).then(res => {
			uni.saveImageToPhotosAlbum({
				filePath:res,
				success: function() {
					console.log('save success');
				}
			});
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		background: #f5f6fa;
		overflow-y: auto;

		&_top {
			width: calc(100% - 60rpx);
			padding: 30rpx;
			background: #e94f06;

			&_box {
				width: calc(100% - 40rpx);
				padding: 20rpx;
				background: #fff;
				border-radius: 8px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.user {
					width: 100%;
					padding-bottom: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #ebecf4;

					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 100%;
					}

					.name {
						width: calc(100% - 140rpx);
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.news {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.left {
						width: calc(100% - 140rpx);

						.text {
							font-size: 26rpx;
							margin-top: 20rpx;
							color: #888;
							display: flex;
							align-items: center;

							text {
								font-size: 30rpx;
							}

							.link {
								font-size: 28rpx;
								background: #f0f0f0;
								margin-left: 10rpx;
								border-radius: 4px;
								padding: 2rpx 5rpx;
								border: 1px solid #ddd;
							}
						}
					}

					.right {
						width: 120rpx;
						display: flex;
						flex-direction: column;
						justify-content: flex-end;
						align-items: center;

						image {
							width: 70rpx;
						}

						.text {
							color: #999;
							font-size: 24rpx;
							margin-top: 10rpx;
						}
					}
				}

				.qrimg {
					width: 50%;
				}

				.qrtext {
					font-size: 32rpx;
					margin-top: 20rpx;
					color: #999;

					text {
						font-weight: bold;
						color: #000;
					}
				}

				.qrbutton {
					width: 200rpx;
					height: 80rpx;
					background: #e94f06;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					border-radius: 10px;
					margin-top: 40rpx;
				}
			}
		}

		&_title {
			width: calc(100% - 60rpx);
			padding: 30rpx;
			font-size: 32rpx;
		}

		&_news {
			width: calc(100% - 60rpx);
			padding: 30rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.name {
				width: 150rpx;
			}

			.text {
				flex: 1;
			}
		}

		&_bottom {
			width: 100%;
			height: 100rpx;

			.button {
				width: 100%;
				height: 100rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				background: #e94f06;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 38rpx;
			}
		}

		&_isbottom {
			width: 100%;
			height: 100rpx;

			&_box {
				width: 100%;
				height: 100rpx;
				position: fixed;
				left: 0;
				bottom: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #fff;
				box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);

				.button {
					flex: 1;
					color: #fff;
					height: 100%;
					background: #e94f06;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 38rpx;
				}

				.button:nth-child(1) {
					background: #fff;
					color: #e94f06;
				}
			}
		}
	}
</style>